<template>
	<view :style="[AppSkinVar]">
		<e-loading-page :loading="loading">
			<template #icon>
				<loader></loader>
			</template>
		</e-loading-page>
		<scroll-view scroll-y @scrolltolower="handleQueryPage()" lower-threshold="60">
			<view class="e-p-l-20 e-p-r-20 ">
				<view class="e-m-t-20 e-radius-20 overflow-hidd" v-for="(order, index) in list" :key="index" @tap="$goTo('/pages/order/refund/details', { id: order.refundId })">
					<order-goods-card :goodsList="[order.params.deputy]" :isJump="false"  goodsLink="/pages/order/refund/details">
						<template v-slot:header>
							<text :class="{ 'e-font-24': $isEnglishVersion }">{{ $t('order.退款编号') }}：{{ order.refundSn }}</text>
							<text :class="{ 'e-font-26': $isEnglishVersion }" class="c-primary" v-if="orderStatusText && orderStatusText[order.returnMoneySts]">
								{{ orderStatusText[order.returnMoneySts].dictLabel }}
							</text>
						</template>
					</order-goods-card>
					<order-button class="bg-white shadow-f3" v-if="order.returnMoneySts === 0" :info="order" @cancelRefund="cancelRefund(order.refundId)" type="refund"></order-button>
				</view>
			</view>
			
			<empty :text="$t('user.暂无记录')" :icon="$staticPath('default_img.png')" v-if="isEmpty"></empty>
			<load-more v-else :showLoad="showLoad"></load-more>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { getRefundOrderList, postCancelRefund, getDicts } from '@/common/request/api';
import { useQueryPage, usePromise } from '@/common/hooks';
import { onLoad, onShow, onPullDownRefresh } from '@dcloudio/uni-app';
import { useInit } from '@/common/stores';
import { storeToRefs } from 'pinia';
import orderButton from '../child/order-button.vue';


const { orderIconText } = storeToRefs(useInit());
const loading = ref(true);
watch(orderIconText, (value) => {
	if (value && value[4]) {
		uni.setNavigationBarTitle({
			title: value[4]
		});
	}
});

const [getOrderStatusText, orderStatusText] = usePromise(async () => {
	const res = await getDicts('return_money_sts');
	return res.data;
});

const { list, showLoad, isEmpty, handleQueryPage, handleRefresh, handleUpdate } = useQueryPage({
	api: getRefundOrderList,
	pageSize: 10
});

const cancelRefund = (id: number) => {
	postCancelRefund(id).then(() => {
		handleRefresh();
	});
};

onLoad(() => {
	getOrderStatusText();
	if (orderIconText.value && orderIconText.value[4]) {
		uni.setNavigationBarTitle({
			title: orderIconText.value[4]
		});
	}
});
onShow(() => {
	handleUpdate().finally(() => {
		loading.value = false;
	});
});

onPullDownRefresh(() => {
	loading.value = true;
	handleRefresh().finally(() => {
		loading.value = false;
		uni.stopPullDownRefresh();
	});
});
</script>

<style lang="scss" scoped>
.shadow-f3 {
	box-shadow: 0px -2rpx 0px 0px #f3f3f3;
}
scroll-view {
	height: 100vh;
}
</style>
